<!-- 项目首页 -->
<template>
    <div class="login-box">
        <div class="logo-box">
            <img src="https://sa-token.cc/logo.png" alt="logo">
        </div>
        <br>
        <h2>Sa-Sso-Pro Client 端 - 前后端分离 Vue2 对接演示</h2> <br>
        <p>当前系统：<span class="client-domain">{{ clientDomain }}</span></p> <br>
        <!-- ---------- 已登录视图 ---------- -->
        <div class="login-info" v-if="isLogin">
            <h3>账号状态</h3>
            <p>
                <b class="green">已登录</b>
                （
                <span>账号id={{ user.id }}</span>，
                <span>昵称={{ user.username }}</span>，
                <span>年龄={{ user.age }}</span>，
                <span>登录次数={{ user.loginCount }}</span>
                )
            </p>
            <h3>相关操作</h3>
            <p>
                <a :href="logoutUrl">跳页面注销</a>
                <a href="javascript:;" @click="logout()">使用Ajax调用API注销</a>
                <a href="javascript:;" @click="logoutByAlone()">当前应用单独注销</a>
            </p>
        </div>
        <!-- ---------- 未登录视图 ---------- -->
        <div class="un-login-info" v-else>
            <h3>账号状态</h3>
            <p>
                <b class="red">未登录</b>
            </p>
            <h3>相关操作</h3>
            <p>
                <router-link :to="loginUrl">直接登录</router-link>
                <a href="javascript:;" @click="getCurrInfo()">使用Ajax调用API触发登录</a>
            </p>
        </div>
        <div style="height: 200px;"></div>
    </div>
</template>

<script>
import {baseUrl, ajax} from './method-util.js'

export default {
    name: 'App',
    data() {
        return {
            // 是否登录
            isLogin: false,
            // 用户信息 
            user: {},
            // 当前地址 
            clientDomain: location.protocol + "//" + location.host,
            // 单点登录地址
            loginUrl: '/sso-login?back=' + encodeURIComponent(location.href),
            // 单点注销地址
            logoutUrl: baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href),
        }
    },
    methods: {
        // 查询当前会话是否登录 
        loadInfo: function () {
            // 查询当前会话是否登录
            ajax('/getCurrInfo', {}, function (res) {
                console.log('/isLogin 返回数据：', res);
                if (res.code === 200) {
                    this.isLogin = true;
                    this.user = res.data;
                } else if (res.code === 401) {
                    this.isLogin = false;
                } else {
                    alert(res.msg);
                }
            }.bind(this))
        },
        // 调用API触发登录 
        getCurrInfo: function () {
            ajax('/getCurrInfo', {}, function (res) {
                // 根据返回的状态码执行不同动作
                if (res.code === 200) {
                    alert(res.msg);
                } else if (res.code === 401) {
                    const confirmOk = confirm('该数据仅对登录用户开放，现在就去登录？');
                    if (confirmOk) {
                        this.$router.push(this.loginUrl);
                    }
                } else {
                    alert(res.msg);
                }
            }.bind(this));
        },
        // 调用API进行注销 
        logout: function () {
            ajax('/sso/logout', {}, function (res) {
                // 根据返回的状态码执行不同动作
                if (res.code === 200) {
                    alert('注销成功');
                    setTimeout(function () {
                        location.reload(true);
                    }, 100);
                } else {
                    alert(res.msg);
                }
            });
        },
        // 当前应用独自注销
        logoutByAlone: function () {
            ajax('/sso/logoutByAlone', {}, function (res) {
                // 根据返回的状态码执行不同动作
                if (res.code === 200) {
                    alert('注销成功');
                    setTimeout(function () {
                        location.reload(true);
                    }, 100);
                } else {
                    alert(res.msg);
                }
            })
        }
    },
    created() {
        this.loadInfo();
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.login-box {
    max-width: 1000px;
    text-align: center;
    margin: 30px auto;
    padding: 1em;
}

.client-domain {
    margin: 10px;
}

.login-info, .un-login-info {
    line-height: 40px;
}

.logo-box img {
    width: 220px;
    height: 220px;
}

p {
    color: #666;
}

.green {
    color: green;
}

.red {
    color: red;
}

a {
    text-decoration: none;
    margin-right: 10px;
    line-height: 20px;
    display: inline-block;
    border-bottom: 1px solid #FFF;
}

a:hover {
    border-bottom: 1px solid blue;
}

h3 {
    margin-top: 20px;
    margin-bottom: 0px;
    color: #000;
}

/* loading框样式 */
/*.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }*/
</style>

